<template>
	<view class="mine">
		<view class="menu-item">
			<view class="left">
				头像
			</view>
			<view class="right">
				<image src="https://www.auok.ltd/background.jpg"></image>
			</view>
		</view>
		<view class="menu-item" @click="clickTo(1)">
			<view class="left">
				用户名
			</view>
			<view class="right">
				aa123123
			</view>
		</view>
		<view class="menu-item" @click="sexChooseShow = true">
			<view class="left">
				性别
			</view>
			<view class="right">
				<view>{{baseInfo.sex}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="menu-item" @click="showTimePicker = true">
			<view class="left">
				生日
			</view>
			<view class="right">
				<view>{{baseInfo.birthday}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="menu-item" @click="clickTo(1)">
			<view class="left">
				签名
			</view>
			<view class="right">
				<input v-model="baseInfo.sign"></input>
				<!-- <u-icon name="arrow-right"></u-icon> -->
			</view>
		</view>
		<u-select v-model="sexChooseShow" :list="[{label:'男',value:'1'},{label:'女',value:'0'}]" @confirm="sexConfirm">
		</u-select>
		<u-picker mode="time" v-model="showTimePicker" :params="params" @confirm="birthdayConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showTimePicker: false,
				sexChooseShow: false,
				baseInfo: {
					sex: '男',
					birthday: '1999-02-10',
					sign: '春眠不觉晓'
				}
			};
		},
		methods: {
			sexConfirm(e) {
				console.log(e)
				this.baseInfo.sex = e[0].label
			},
			birthdayConfirm(e) {
				console.log(e)
				this.baseInfo.birthday = `${e.year}-${e.month}-${e.day}`
			},

			clickTo(item) {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu-item {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		margin-bottom: 2rpx;
		// border: 1px solid;

		.u-icon {
			margin-left: 20rpx;
		}

		.right {
			display: flex;
			align-items: center;
			color: rgba($color: gray, $alpha: .8);
			justify-content: space-between;
			text-align: right;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
	}

	.u-icon {
		color: rgba($color: gray, $alpha: .5);
	}

	.user {
		padding: 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.top {
			display: flex;
			align-items: center;

			.avatar {
				margin-right: 15rpx;

				image {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
				}
			}

			.nickname {
				font-weight: 700;
			}

			.sign {
				font-size: 26rpx;
				padding: 10rpx 0;
				color: rgba($color: gray, $alpha: .5);
			}
		}
	}

	.mine {
		height: 100vh;
		background-color: rgba(127, 127, 127, .1);
		;
	}
</style>
